<template>
	<view class="container">
		<view class="tabs">
			<view :class="{active:type==-1}" @click="changeTab(-1)">全部</view>
			<view :class="{active:type==2}" @click="changeTab(2)">次卡</view>
			<view :class="{active:type==3}" @click="changeTab(3)">套餐卡</view>
			<view :class="{active:type==1}" @click="changeTab(1)">会员卡</view>
		</view>
		<view class="logs">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scroll" :style="{height:scrollHeight+'px'}">
				<view class="scroll-item" v-for="(item,idx) in logsList" :key="item.log_id">
					<view class="goods-box">
						<view class="goods">
							<image :src="item.thumb" mode="aspectFill"></image>
							<view class="desc">
								<view class="type">{{item.name}} [{{typename[item.type]}}]</view>
							</view>
							<view class="operation">
								<view class="used-btn" @click="usecard(item.log_id)">使用</view>
								<view class="his-btn" @click="showhis(item.log_id)">历史</view>
								<view class="ret-btn" @click="retcard(item.log_id)">退卡</view>
								<text v-if="item.type == 2" style="color: #007AFF;margin-left: auto;"> 剩余{{item.nums}}次</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tui-modal :show="inputmodalshow" @cancel="closeintpumodal" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">退卡提示</view>
				<view style="color: #999;font-size: 12px;">请谨慎操作，操作不可逆，将会删除该会员的此卡，退卡不影响订单</view>
				<input placeholder="请输入退卡原因" class="tui-modal-input" v-model="memo" />
				<tui-button height="72rpx" type="danger" :size="28" shape="circle" @click="subinputmodal">确定</tui-button>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logsList:[],
				mid:0,
				type:-1,
				scrollTop:0,
				last_page:2,
				page:1,
				current_time_index:null,
				typename:['储值卡','会员卡','次卡','套餐卡'],
				scrollHeight:500,
				memo:'',
				inputmodalshow:false,
				curr_card_id:0,//退卡时选择的卡的ID
				
			}
		},
		onLoad(opt){
			this.mid = opt.mid;
			if(opt.type){
				this.type = opt.type;
			}
			let obj = {};
			
			uni.getSystemInfo({
				success: (res) => {
					// this.width = obj.left || res.windowWidth;
					// this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					// this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// // this.scrollH = res.windowWidth * 0.6
					// console.log(res.windowHeight);
					this.scrollHeight = res.windowHeight -50;
				}
			})
		},
		onShow(){
			this.getLogs();
		},
		methods: {
			changeTab(val){
				this.type =val;
				this.page=1;
				this.last_page=3;
				this.logsList=[];
				this.getLogs();
			},
			getLogs(){
				if(this.page > this.last_page){return false;}
				this.tui.get('user/card/lists',{type:this.type,mid:this.mid}).then(res=>{
					this.logsList = res.data;
				})
			},
			scroll(){
				//上拉加载更多
				this.getLogs()
			},
			usecard(id){
				uni.navigateTo({
					url:'../order/order?card='+id+'&mid='+this.mid
				})
			},
			showhis(id){
				uni.navigateTo({
					url:'./cardhis?id='+id
				})
			},
			retcard(id){
				this.inputmodalshow = true;
				this.curr_card_id = id;
			},
			closeintpumodal(){
				this.inputmodalshow=false;
				this.memo='';
			},subinputmodal(){
				this.tui.post('/user/card/back',{memo:this.memo,mid:this.mid,id:this.curr_card_id}).then(res=>{
					if(res.code){
						this.memo='';
						this.inputmodalshow=false;
						this.getLogs()
					}else{
						this.memo='';
						this.inputmodalshow=false;
						this.tui.toast(res.msg);
					}
				})
			}
			
		}
	}
</script>

<style>
	.container .tabs{background-color: #FFFFFF;width: 100%;padding: 15px;box-sizing: border-box;}
	.tabs>view{width: 25%;display: block;float: left;text-align: center;font-size: 14px;}
	.tabs>view.active{color:#fe1a4b;font-weight: 700;position: relative;}
	.tabs>view.active::after{color:#fe1a4b;font-weight: 700;content: '';position: absolute;bottom: -5px;height: 2px;width: 30%;background-color: #fe1a4b;left: 35%;}
	.date-box{width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;background-color: #FFFFFF;padding: 10px 15px;box-sizing: border-box;}
	.date-box>view.date-btn{background: #EEEEEE;font-size: 12px;padding: 5px 10px;}
	.date-box>view.date-btn.active{background: #fe1a4b;font-size: 12px;padding: 5px 10px;color: #FFFFFF;}
	.date-box .time{font-size: 12px;color: #999;background-color: #F8F8F8;padding: 5px;}
	.total{margin: 10px;background-color: #FFFFFF;border-radius: 10px;}
	.t2,.t1{display: flex;justify-content: space-between;align-items: center;padding:10px 15px;color: #999999;}
	.total .t1>view{width: 50%;font-size: 12px;}
	.t2>view{width: 50%;font-size: 14px;color: #333333;}
	.t2>view>text{color: #999999;padding-right: 15px;}
	.t1>view>.redtxt{color: #FE1A4B;font-size: 24px;}
	.t1>view>.blacktxt{color: #000;font-size: 24px;}
	.t1>view>.redtxt text{color: #FE1A4B;font-size: 10px;}
	.scroll-item{margin: 0 10px 10px 10px;box-sizing: border-box;}
	.scroll-item .goods-box{margin-top: 10px;border-radius: 15px;overflow: hidden;background-color: #FFFFFF;}
	.scroll-item .goods-box .goods{position: relative; display: flex;justify-content: flex-start;color: #666;font-size: 14px;flex-wrap: wrap;}
	.scroll-item .goods-box .goods>image{width: 100%;height: 120px;}
	.scroll-item .goods-box .goods .desc{position: absolute;top: 10px;left: 10px;}
	.scroll-item .goods-box .goods .type{background-color: rgba(0,0,0,0.5);color: #FFFFFF;font-size: 12px;padding:5px 10px;margin-right: 10px;border-radius: 5px;}
	.scroll-item .goods-box .goods .operation{font-size: 12px;display: flex;padding: 10px;}
	.scroll-item .goods-box .goods .operation>view{padding: 5px 10px;border:1px solid #16AB60;margin-right: 5px;border-radius: 30px;color: #16AB60;}
	.scroll-item .goods-box .goods .operation>view.his-btn{border:1px solid #0062CC;color: #0062CC;}
	.scroll-item .goods-box .goods .operation>view.ret-btn{border:1px solid #fe1a4b;color: #fe1a4b;}
	.tui-modal-input{border: 1px solid #DDDDDD;padding: 5px;margin: 10px 0 20px 0;}
</style>
